<template>
  <div style="margin-bottom: 10px">
    <!-- 侧边栏 -->
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      :collapse-transition="false"
      :default-active="activeMenu"
    >
<!--      <div style="margin-top: 18px;font-weight: bolder">{{ indexCode }} / {{ projName }}</div>-->
      <!-- 一级菜单 -->
      <!--          el-submenu-->
      <template v-for="(item,index) in itemList">
        <!-- 一级菜单的模板区域 -->
        <!-- 菜单名称 -->
        <router-link :to="'/project/home/'+item.path">
          <el-menu-item :key="index" :index="'/project/home/'+item.path">
            {{ item.title }}
            <!-- 二级菜单 -->
            <!--            <el-menu-item :index="item.id+'-'+subItem.id" v-for="subItem in item.children" :key="subItem.id">
                    <span slot="title">{{subItem.authName}}</span>
                </el-menu-item>-->
            <!--        <div v-if="item.notLinks" class="links">
                <router-link v-for="items in item.links" :to="items.url">{{ items.name }}</router-link>
              </div>-->
          </el-menu-item>
        </router-link>
      </template>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: 'Header',
  data() {
    return {
      itemList: [
        { path: 'projectInfo', title: '项目信息' },
        { path: 'humanRes', title: '人力资源' },
        { path: 'projectSub', title: '子项信息' },
        { path: 'projectKanBan', title: '项目看板' },
        { path: 'projectSubKanBan', title: '子项看板' },
      ],
      projId: null,
      projName: '',
      indexCode: ''
    }
  },
  computed: {
    activeMenu() {
      const route = this.$route
      const { path } = route
      return path
    }
  },
  // 监听路由
  watch: {
    '$route.path': {
      handler: function(val) {
        if (JSON.parse(localStorage.getItem('projectObject')).projName) {
          this.projName = JSON.parse(localStorage.getItem('projectObject')).projName
        }
        if (JSON.parse(localStorage.getItem('projectObject')).indexCode) {
          this.indexCode = JSON.parse(localStorage.getItem('projectObject')).indexCode
        }
        if (JSON.parse(localStorage.getItem('projectObject')).projId) {
          this.projId = JSON.parse(localStorage.getItem('projectObject')).projId
        } else {
          this.$message({
            message: '请新增项目信息！',
            type: 'warning'
          })
        }
      },
      // 立即处理 进入页面就触发
      immediate: true,
      // 深度监听 属性的变化
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
.el-menu{
  text-align: center;
  .el-menu-item{
    display: inline-block;
  }
}
.el-menu-item.is-active {
  color: var(--ui-theme-color);
  border-bottom: 1px solid;
}
</style>
